<!doctype html>
<html>
<head>
  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <script src="../node_modules/wct-browser-legacy/browser.js"></script>
  <script type="module" src="../src/components/entity/state-info.js"></script>
</head>
<body>
  <test-fixture id="stateInfoSecondaryLine">
    <template>
      <state-info hass="[[hass]]" secondary-line><my-elem>text</my-elem></state-info>
    </template>
  </test-fixture>
  <test-fixture id="stateInfo">
    <template>
      <state-info hass="[[hass]]"></state-info>
    </template>
  </test-fixture>

  <script type="module">
import '../src/components/entity/state-info.js';
function lightOrShadow(elem, selector) {
  return elem.shadowRoot ?
      elem.shadowRoot.querySelector(selector) :
      elem.querySelector(selector);
}

suite('state-info', function() {
  var si;

  setup(function() {
    si = fixture('stateInfo');
  });

  test('default values', function() {
    assert.isUndefined(si.stateObj);
    assert.isUndefined(si.inDialog);
  });

  test('has state-badge', function() {
    assert.isOk(lightOrShadow(si, 'state-badge'));
  });

  test('stateObj', function(done) {
    si.stateObj = {entity_id: 'light.demo', last_changed: '2017-01-01T00:00:00+00:00', state: 'off', attributes: {friendly_name: 'Name'}};
    flush(function() {
      var stateBadge = lightOrShadow(si, 'state-badge');
      assert.isOk(stateBadge);
      assert.deepEqual(stateBadge.stateObj, si.stateObj);

      var name = lightOrShadow(si, '.name');
      assert.isOk(name, '.name missing');
      assert.equal(name.textContent, 'Name');
      assert.equal(getComputedStyle(name).lineHeight, '40px');

      assert.isNotOk(lightOrShadow(si, 'ha-relative-time'));
      done();
    });
  });

  test('relative time', function(done) {
    si.stateObj = {entity_id: 'light.demo', last_changed: '2017-01-01T00:00:00+00:00', state: 'off', attributes: {friendly_name: 'Name'}};
    si.inDialog = true;
    flush(function() {
      var relativeTime = lightOrShadow(si, 'ha-relative-time');
      var name = lightOrShadow(si, '.name');

      assert.isOk(relativeTime);
      assert.notEqual(relativeTime.textContent, 'never');
      assert.notEqual(relativeTime.textContent, '');

      assert.isOk(name);
      assert.equal(getComputedStyle(name).lineHeight, '20px');

      si.stateObj = {entity_id: 'light.demo', state: 'off', attributes: {friendly_name: 'Name'}};
      flush(function() {
        assert.equal(relativeTime.textContent, 'never');
        done();
      });
    });
  });

  test('secondary line', function(done) {
    si = fixture('stateInfoSecondaryLine');
    si.stateObj = {entity_id: 'light.demo', last_changed: '2017-01-01T00:00:00+00:00', state: 'off', attributes: {friendly_name: 'Name'}};
    si.inDialog = false;
    flush(function() {
      var name = lightOrShadow(si, '.name');
      assert.isOk(name);
      assert.equal(getComputedStyle(name).lineHeight, '20px');
      var content = si.getElementsByTagName('my-elem')[0];
      assert.isOk(content);
      assert.equal(content.textContent, 'text');
      done();
    });
  });
});
</script>
</body>
</html>
